<template>
  <div class="site-preview">
    <el-dialog v-model="isVisible" :show-close="false" :before-close="onClose" width="640px">
      <ComponentClickStatics :isClickStatics="false" :site_id="site_id"></ComponentClickStatics>
      <div class="info-con" v-if="siteTempPreviewItem">
        <p class="info">设置作品信息
          <i class="jy-icon-layer-closed btn-close" @click.stop="onClose"></i>
        </p>
        <setting-share-all v-if="isVisible && share && !isTemplete && getSiteMobileType" :share="share" @change="onChange"></setting-share-all>
        <el-button type="primary" @click.stop="Online">{{ siteTempPreviewItem.status == 1 ? "下 线" : "上 线"}}</el-button>
        <p class="date">最近编辑日期：{{siteTempPreviewItem.update_time}} </p>
        <p v-if="getSiteMobileType" class="qr" @click="onQrcode"><img :src="siteTempPreviewItem.qrcode"></p>
        <p v-if="getSiteMobileType" class="template">手机扫一扫预览模板</p>
        <a :class="displayMarginByH5Type" rel="noopener noreferrer">{{siteTempPreviewItem.pageurl}}</a>
        <p class="link-con" @click.stop="clipboardCopy(siteTempPreviewItem.pageurl)">
          <span class="link"><i class="jy-icon-link"></i>复制链接</span>
        </p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import SettingShareAll from "@/views/child/setting/setting-share-all.vue"
import ComponentClickStatics from '@/views/child/admin/common/ComponentClickStatics.vue'
import { mapState, mapActions } from 'vuex'
import { H5_TYPE } from '@/common/const-dif'
import { copyUtils } from '@/views/js/copy-utils'

export default {
  mixins: [copyUtils],
  setup () {
    return {
      pageIndex: 0,
      pageNumber: "1/1",
      isSave: false
    };
  },
  components: {
    SettingShareAll,
    ComponentClickStatics,
  },
  props: ["isVisible"],
  computed: {
    ...mapState("user", {
      share: state => state.siteData.attrs ? _.cloneDeep(state.siteData.attrs.share) : null,
      siteTempPreviewItem: state => state.siteTempPreviewItem,
      site_id: state => state.siteData.id,
      siteAttrs: state => state.siteData.attrs,
      isTemplete: state => state.siteData.is_template == 1 ? true :  false,
    }),
    getSiteMobileType(){
      if(this.siteAttrs && this.siteAttrs.h5Type == H5_TYPE.mobile){
        return true
      }else{
        return false
      }
    },
    displayMarginByH5Type(){
     return { "margin-top-60":  this.siteAttrs && this.siteAttrs.h5Type == H5_TYPE.mobile ? false : true }
    }
  },
  methods: {
    ...mapActions({
      setSitePreview: "user/setSitePreview",
      saveSiteData: "user/saveSiteData",
      onlineSite: "user/onlineSite",
      recoverSiteQrcode: "user/recoverSiteQrcode",
    }),
    onQrcode(){
      let site_id = this.site_id
      this.recoverSiteQrcode({site_id})
    },
    Online() {
      let params = {
        online: this.siteTempPreviewItem.status == 1 ? 2 : 1,  // online 2-下线，1-上线
        site_id: this.site_id,
        isTempPreviewUrl: true
      };
      this.onlineSite(params);
    },
    onChange(){
      this.isSave = true;
    },
    onClose() {
      this.setSitePreview({isActive: false});
      if(this.isSave){
        this.saveSiteData(this.site_id);
      }
      this.isSave = false;
    },
  },
};
</script>
<style lang="scss">
.site-preview {
  position: absolute;
  z-index: 9999;

  .share-all-style {
    padding: 0;
  }
  .el-dialog {
    width: 640px;
    background: transparent;
    box-shadow: none !important;

    .el-dialog__header {
      display: none;
    }
  }
  .el-dialog__body {
    display: flex;
    flex-direction: row;
    // justify-content: center;
    padding: 0;
    height: inherit;

    .info-con {
      width: 320px;
      height: inherit;
      background-color: #ffffff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      // justify-content: center;

      .info {
        top: 12px;
        margin-bottom: 20px;
        text-align: left;
        font-size: 16px;
        color: #373438;
        .btn-close {
          position: absolute;
          top: 12px;
          right: 10px;
        }
      }
      .el-button {
        padding: 10px 20px;
        border-radius: 0;
        margin: 10px 0;
        margin-top: 20px;
        width: 100%;
      }
      .qr{
        text-align: center;
        margin-top:40px;
        img{
          width: 120px;
          height: 120px;
        }
      }
      .date{
        color: #A5AFBE;
        text-align: left;
        font-size: 12px;

      }
      .link-con{
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
      }
      .link{
        border: 1px solid #F3F5FA;
        width: 126px;
        padding: 4px 20px;
        color:#43475C;
        display: inline-block;
        cursor: pointer;
      }
      .template{
        color: #43475C;
        text-align: center;
        font-size: 12px;
        margin-top: 10px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
